import {
  PageHeader,
  Tabs,
  Statistic,
  Descriptions,
  Card,
  Row,
  Col,
  Image,
  Timeline,
} from "antd";
import React, { Component } from "react";
import { Pie, measureTextWidth, Line } from "@ant-design/charts";
import { Productdetail } from "../../../services/auth";

const Content = ({ children, extra }) => (
  <div className="content">
    <div className="main">{children}</div>
    <div className="extra">{extra}</div>
  </div>
);
const { TabPane } = Tabs;
const gridStyle = {
  width: "50%",
  height: "460px",
  textAlign: "center",
};
const { Meta } = Card;

export default class ProductDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      storageData: [],
      timeLine: [],
      salesData: [],
    };
  }
  //获取图表数据
  componentWillMount() {
    const { value } = this.props;
    Productdetail(value.id).then(
      (response) => {
        // console.log(response.data);
        this.setState({
          storageData: response.data.storageData,
          timeLine: response.data.timeLine,
          salesData: response.data.salesData,
        });
      },
      (error) => {
        console.log("失败了", error);
      }
    );
  }

  render() {
    const { value } = this.props;
    //中间行——状态、单价
    const extraContent = (
      <div>
        <br />
        <Card
          bordered={false}
          bodyStyle={{ paddingLeft: "0px", marginLeft: "-16px" }}
        >
          <Row gutter={16}>
            <Col span={3}>
              <Statistic title="产品状态" value={value.status} />
            </Col>
            <Col span={4}>
              <Statistic
                title="单价"
                prefix="¥"
                value={value.price}
                valueStyle={{ color: "#cf1322" }}
              />
            </Col>
          </Row>
        </Card>
      </div>
    );
    //1.库存环图
    function renderStatistic(containerWidth, text, style) {
      var _measureTextWidth = (0, measureTextWidth)(text, style),
        textWidth = _measureTextWidth.width,
        textHeight = _measureTextWidth.height;
      var R = containerWidth / 2;
      var scale = 0.8;
      if (containerWidth < textWidth) {
        scale = Math.min(
          Math.sqrt(
            Math.abs(
              Math.pow(R, 2) /
                (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2))
            )
          ),
          1
        );
      }
      var textStyleStr = "width:".concat(containerWidth, "px;");
      return '<div style="'
        .concat(textStyleStr, ";font-size:")
        .concat(scale, "em;line-height:")
        .concat(scale < 1 ? 1 : "inherit", ';">')
        .concat(text, "</div>");
    }
    var config1 = {
      appendPadding: 10,
      data: this.state.storageData,
      angleField: "quantity",
      colorField: "plant_name",
      radius: 1,
      innerRadius: 0.64,
      label: {
        type: "inner",
        offset: "-50%",
        style: { textAlign: "center", fontSize: 18 },
        autoRotate: false,
        content: "{value}",
      },
      statistic: {
        title: {
          offsetY: 0,
          customHtml: function customHtml(container, view, datum) {
            var _container$getBoundin = container.getBoundingClientRect(),
              width = _container$getBoundin.width,
              height = _container$getBoundin.height;
            var d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2));
            var text = datum ? datum.plant_name : "总计";
            return renderStatistic(d, text, { fontSize: 20 });
          },
        },
        content: {
          offsetY: 4,
          customHtml: function customHtml(container, view, datum, data) {
            var _container$getBoundin2 = container.getBoundingClientRect(),
              width = _container$getBoundin2.width;
            var text = datum
              ? datum.quantity
              : data.reduce(function (r, d) {
                  return r + d.quantity;
                }, 0);
            return renderStatistic(width, text, { fontSize: 20 });
          },
        },
      },
      interactions: [
        { type: "element-selected" },
        { type: "element-active" },
        { type: "pie-statistic-active" },
      ],
    };

    //2.销量折线图
    var config2 = {
      data: this.state.salesData,
      xField: "time",
      yField: "sumCount",
      label: {},
      point: {
        size: 5,
        shape: "diamond",
        style: {
          fill: "white",
          stroke: "#5B8FF9",
          lineWidth: 2,
        },
      },
      tooltip: { showMarkers: false },
      state: {
        active: {
          style: {
            shadowBlur: 4,
            stroke: "#000",
            fill: "red",
          },
        },
      },
      interactions: [{ type: "marker-active" }],
    };

    return (
      <PageHeader
        className="site-page-header-responsive"
        title={`编号：${value.id}`}
        footer={
          <Tabs defaultActiveKey="1">
            <TabPane tab="详情展示" key="1">
              <Card bordered={false} style={{ marginTop: "24px" }}>
                <Card.Grid style={gridStyle} hoverable={false}>
                  <br />
                  <br />
                  <Image
                    width={270}
                    height="auto" //下面传入照片路径
                    src={value.picture}
                  />
                   <Meta description="点击大图展示" />
                </Card.Grid>
                <Card.Grid
                  style={{
                    width: "50%",
                    height: "460px",
                    textAlign: "center",
                    overflowY: "auto",
                    fontSize: "17px",
                    fontFamily: "Georgia, serif",
                  }}
                >
                  <div>
                    {value.description.split("\n").map((value) => {
                      return <p>{value !== "" ? value : <br />}</p>;
                    })}
                  </div>
                </Card.Grid>
              </Card>
            </TabPane>
            <TabPane tab="销售统计" key="2">
              <Card style={{ marginTop: "24px" }}>
                <Line {...config2} />
              </Card>
            </TabPane>
            <TabPane tab="库存统计" key="3">
              <Card bordered={false} style={{ marginTop: "24px" }}>
                <Card.Grid style={gridStyle}>
                  <Pie {...config1} />
                </Card.Grid>
                <Card.Grid
                  style={{
                    width: "50%",
                    height: "460px",
                    overflowY: "auto",
                  }}
                >
                  <Timeline mode="left">
                    {this.state.timeLine.map((data, key) => {
                      return (
                        <Timeline.Item
                          key={key}
                          label={data.record_date}
                          color={
                            data.description === "生产入库" ? "green" : "blue"
                          }
                        >
                          {`${data.plant_name}${data.description}${data.quantity}件`}
                        </Timeline.Item>
                      );
                    })}
                  </Timeline>
                </Card.Grid>
              </Card>
            </TabPane>
          </Tabs>
        }
      >
        <Content extra={extraContent}>
          <Descriptions size="default" column={2} bordered>
            <Descriptions.Item
              label="产品名称"
              contentStyle={{ fontWeight: "bold" }}
            >
              {value.name}
            </Descriptions.Item>
            <Descriptions.Item
              label="规格"
              contentStyle={{ fontWeight: "bold" }}
            >
              {value.specification}
            </Descriptions.Item>
            <Descriptions.Item
              label="净重"
              contentStyle={{ fontWeight: "bold" }}
            >
              {value.weight}
            </Descriptions.Item>
            <Descriptions.Item
              label="产品种类"
              contentStyle={{ fontWeight: "bold" }}
            >
              {value.type}
            </Descriptions.Item>
          </Descriptions>
        </Content>
      </PageHeader>
    );
  }
}
